#@Author: bjy @Date: 2019/4/20 15:32 @Version 1.0#
<template>
  <!-- 地图组件 -->
  <baidu-map class="isMap" id="mapID" :center="centerMap" :zoom="zoomSize" :scroll-wheel-zoom="true" @click="getPoint" v-if="openCloseStatus">
    <!--信息窗口，show属性是控制显示隐藏，infoWindowClose和infoWindowOpen是控制信息窗口关闭隐藏的方法-->
    <bm-marker :position="centerMap" >
      <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen" style="font-size: 14px">
        <p>活动地址：{{ add.site }}</p>
      </bm-info-window>
    </bm-marker>
  </baidu-map>
</template>

<script>
    //  此处导入组件,格式,例如:import xxx名称 from "路径"
    export default{
        // 这里是name,记得填写
        name: 'NavBaiduMap',
        // 子组件接收属性
        props: ['centerMap','zoomSize','openCloseStatus'],
        //  数据定义
        data () {
            return {
              add:{site:''},
              setInterval:null,
              show:false,
            }
        },
        // 页面方法
        methods: {
          //            地图点击事件,获得经纬度,创建地址解析器
          getPoint(e){    //点击地图获取一些信息，
            this.show = true;
            this.centerMap.lng = e.point.lng;     //通过  e.point.lng获取经度
            this.centerMap.lat = e.point.lat;     //通过  e.point.lat获取纬度
//            var reqParentValue
            let geocoder= new BMap.Geocoder();  //创建地址解析器的实例
            geocoder.getLocation(e.point,rs=>{
              this.add.site = rs.address;
//              向父组件传值
              var reqParentValue = {lng:e.point.lng,lat:e.point.lat,site:this.add.site}
              this.$emit('getPoint',reqParentValue)
            });

          },
          //          关闭坐标窗口
          infoWindowClose () {
            this.show = false
            clearInterval(this.setInterval)
          },
//          打开坐标窗口
          infoWindowOpen () {
            //这里有个问题纠结了很久，百度的信息窗口默认有个点击其他地方就消失的事件，我没有找到
            //并且信息窗口点击一次显示，一次消失,于是我加了一个100毫秒的定时器，保证每次点击地图都可以展示信息窗口
            this.setInterval = setInterval(()=>{
              this.show = true
            },100)
          },
        },
        // 计算属性
        computed: {},
        // 侦听器
        watch: {},
        // 依赖注入
        components: {}
    }
</script>

<!-- 本地样式 -->
<style scoped>
  .isMap{
    width:100%;
    height: 300px;
  }
</style>
